<template>
    <div class="better-scroll" ref="contrastScroll">
        <slot></slot>
    </div>
</template>

<script>
import { timeSleep } from '@/util/common/common';
import BScroll from 'better-scroll'
export default {
    name: 'compareScroll',
    components: {  },
    data () {
        return {
            scrollInstance: null
        };
    },

    props: {
        probeType: {                    // 1( 屏幕滑动超过一定时间后 )  2( 实时的派发 scroll  ) 3( 实时 且在 momentum 滚动动画运行过程中实时派发 scroll 事件 )
            type: Number,
            default: 1
        },
        click: {
            type: Boolean,
            default: true
        },
        listenScroll: {             
            type: Boolean,
            default: true
        },
        afterScroll: {                  //  滚动结束的位置坐标
            type: Boolean,
            default: false
        },
        beforeScroll: {                 //  滚动开始之前。
            type: Boolean,
            default: false
        }
    },

    computed: {

    },

    async mounted() {
        await timeSleep(1000)
        this.initContrastScroll()
    },

    methods: {
        initContrastScroll() {
            if(!this.$refs.contrastScroll) return

            this.scrollInstance = new BScroll(this.$refs.contrastScroll, {
                probeType: this.probeType,
                click: this.click,
                scrollY: true,
                scrollX: false,
                mouseWheel: true
            })
            
            if(this.listenScroll) {
                this.scrollInstance.on('scroll', (pos) => {
                    this.$emit('scrollChange', pos)
                })
            }
            if(this.afterScroll) {
                this.scrollInstance.on('scrollEnd', () => {
                    this.$emit('afterScroll')
                })
            }
            if(this.beforeScroll) {
                this.scrollInstance.on('beforeScrollStart', () => {
                    this.$emit('beforeScroll')
                })
            }

            this.$emit('scrollReady', this.scrollInstance)
        },

        disable() {
            this.scrollInstance && this.scrollInstance.disable()
        },
        
        enable() {
            this.scrollInstance && this.scrollInstance.enable()
        },

        refresh() {
            this.scrollInstance && this.scrollInstance.refresh()
        },

        scrollTo(x, y, time, easing) {
            this.scrollInstance && this.scrollInstance.scrollTo(x, y, time, easing)
        },
    }
}

</script>

<style lang='scss' scoped>
.better-scroll {
    width: 100%;
    overflow: hidden;
}
</style>